<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Login</title>
</head>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<style type="text/css">
  @import url("styles.css");
</style>

<body>
<div style="width:70%;margin:auto;height:100%;overflow: auto;">
<form action="#" method="post" onsubmit="return onSubmit()">
	<input id="username" name="username" type="text" width="200" required="required"
			placeholder="User Name" class="login"/>
	<input id="password" name="password" type="password" width="200" required="required"
			placeholder="Password" class="login" />
	<input type="submit" value="Login" class="login">
</form>

	
</div>
</body>
<script src="js/jquery-1.8.3.js" ></script>
<script>
function onSubmit()
{
	//console.log("Hello Form Post");
	$.ajax({
	      type: "POST",
	      url: "/CalorieCounterService/UserService.php",
	      data: {
	        username: document.forms[0].username.value, 
	        password: document.forms[0].password.value
	      },
	      success: function( result ) 
	      {
	        //console.log(result);
	        window.location.replace("EntryForm.html?token=" + result);
	      },
	      error: function (xhr, ajaxOptions, thrownError) 
	      {
	     	alert(thrownError);
	      }
	  });
	return false;
}
</script>
</html>